import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { FormInstance } from 'antd/lib/form';
import { Modal, Button, Form, Row, Col, Input, Select, Table } from 'antd';
import PropTypes from 'prop-types';
import styles from './index.less';

const enumTypeOption = [
  { label: '正常', value: 0 },
  { label: 'VIN已存在', value: 1 },
  { label: 'VIN异常', value: 2 },
];
const enumBindTypeOption = [
  { label: '正常', value: 0 },
  { label: 'VIN已绑定其他手持机', value: 1 },
  { label: 'VIN不存在', value: 2 },
  { label: '手持机不存在', value: 3 },
  { label: '手持机已被其它车辆绑定', value: 4 },
  { label: '车辆绑定关系已存在', value: 5 },
  { label: '手持机编号为空', value: 6 },
  { label: 'VIN已绑定其它控制盒', value: 7 },
  { label: '控制盒不存在', value: 8 },
  { label: '控制盒已被其他车辆绑定', value: 9 },
  { label: '控制盒编号为空', value: 10 },
];
const mapStateToProps = (state: any) => ({
  ControlBoxMng: state.ControlBoxMng,
});
class ExportDetailModal extends PureComponent<any, any> {
  formRef = React.createRef<FormInstance>();
  static contextTypes = {
    permissions: PropTypes.array,
    dicData: PropTypes.object,
  };

  constructor(props: any) {
    super(props);
    this.state = {
      loading: false,
      newData: [],
    };
  }
  componentDidUpdate(prevProps: any) {
    const { modalVisible, data } = this.props;
    if (modalVisible && modalVisible !== prevProps.modalVisible && data.length > 0) {
      this.setState({
        newData: data,
      });
    }
  }
  handleSubmit = () => {
    this.formRef.current?.submit();
  };
  handleFormReset = () => {
    const { data } = this.props;
    const newData = data;
    this.setState({
      newData: newData,
    });
    this.formRef.current?.resetFields();
  };
  //按照条件对列表进行数据筛选
  onFinish = (values: any) => {
    const { data } = this.props;
    const result = values.result;
    const code = values.code ?? '';
    const newData = data.filter(
      t => t.vin.includes(code) && (typeof result !== 'number' || result === t.result),
    );
    this.setState({
      newData: newData,
    });
  };

  close = () => {
    const { closeModal } = this.props;
    this.formRef.current && this.formRef.current.resetFields();
    closeModal();
  };
  render() {
    const { modalVisible, exportTypeVal } = this.props;
    const enumType = exportTypeVal === '0' ? enumTypeOption : enumBindTypeOption;
    const resultOption = enumType.map(t => t.label);
    const columns =
      exportTypeVal === '0'
        ? [
            {
              title: '序号',
              dataIndex: 'index',
              render: (text: any, record: any, index: any) => {
                return index + 1;
              },
            },
            {
              title: 'VIN',
              dataIndex: 'vin',
              key: 'vin',
            },
            {
              title: '导入状态',
              dataIndex: 'result',
              key: 'result',
              render: (text: any) => {
                return resultOption[text];
              },
            },
          ]
        : [
            {
              title: '序号',
              dataIndex: 'index',
              render: (text: any, record: any, index: any) => {
                return index + 1;
              },
            },
            {
              title: 'VIN',
              dataIndex: 'vin',
              key: 'vin',
            },
            {
              title: '手持机编号',
              dataIndex: 'handheldsCode',
              key: 'handheldsCode',
            },
            {
              title: '控制盒编号',
              dataIndex: 'cboxCode',
              key: 'cboxCode',
            },
            {
              title: '导入状态',
              dataIndex: 'result',
              key: 'result',
              render: (text: any) => {
                return resultOption[text];
              },
            },
          ];
    return (
      <Modal
        title={'查看导入详情'}
        visible={modalVisible}
        width={700}
        footer={null}
        onCancel={this.close}
      >
        <div className={styles.tableListForm}>
          <Form onFinish={this.onFinish} ref={this.formRef}>
            <Row gutter={24} className={styles.my_searchRow}>
              <Col span={8}>
                <Form.Item name={'result'}>
                  <Select placeholder="请选择导入状态" options={enumType} />
                </Form.Item>
              </Col>
              <Col span={8}>
                <Form.Item
                  name={'code'}
                  rules={[
                    { message: '请输入VIN,只能输入大写英文及数字', pattern: /^[A-Za-z0-9]+$/ },
                  ]}
                  normalize={(value, prevValue, prevValues) => {
                    // 转大写
                    return value.toUpperCase();
                  }}
                >
                  <Input style={{ textTransform: 'uppercase' }} placeholder="VIN" maxLength={50} />
                </Form.Item>
              </Col>
              <Col span={8} style={{textAlign: 'right', paddingTop: 8}}>
                <span>
                  <Button type="primary" size={'small'} htmlType="submit">
                    查询
                  </Button>
                  <Button size={'small'} style={{ marginLeft: 8 }} onClick={this.handleFormReset}>
                    重置
                  </Button>
                </span>
              </Col>
            </Row>
          </Form>
        </div>
        <Row>
          <span style={{ color: 'red', fontSize: 12 }}>
            *导入状态正常的VIN{exportTypeVal === '1' ? '、手持机编号、控制盒编号' : ''}才可继续导入
          </span>
        </Row>
        <Row gutter={24}>
          <Col span={24}>
            <Table
              key={'vin'}
              dataSource={this.state.newData}
              columns={columns}
              pagination={false}
            />
          </Col>
        </Row>
      </Modal>
    );
  }
}
export default connect(mapStateToProps)(ExportDetailModal);
